<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <link rel="stylesheet" href="css/index1.css">
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                成都轨道交通大数据分析平台
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-top">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="title">2020年客流量分析(1月1日到7月16日为真实值，7月17日到12月31日为预测值)</div>
                <!--<div class="top-list">
                    <p>当你征服一座山峰时，它已经在你脚下了，你必须再找一座山峰去征服，否则，你只有下山，走下坡路了</p>
                    <ul>
                        <li>建筑面积：4250</li>
                        <li>农户总数：3545户</li>
                        <li>人口总数：1254万</li>
                        <li>年总产值：53万</li>
                        <li>年总产值：468万</li>
                        <li>年总产值：7854万</li>
                    </ul>
                </div>-->
<div class="bottom-b">
                    <div id="chart7" class="allnav"></div>
                </div>
            </div>
            <div class="left-cen">
                <div class="title">实时监控拥堵情况</div>
               <div id="FontScroll" class="myscroll">
                        <ul>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                                    <span>6:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;犀浦站</span>
                                    <span>客流量:821&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常</span>
                                    
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                    <span>8:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;犀浦站</span>
                                    <span>客流量:3845&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拥堵</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                    <span>13:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;犀浦站</span>
                                    <span>客流量:1200&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                                   <span>18:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;犀浦站</span>
                                    <span>客流量:3256&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拥堵</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                                    <span>21:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;犀浦站</span>
                                    <span>客流量:2225&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻度</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>6</b>
                                    </span>
                                     <span>6:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春熙路</span>
                                    <span>客流量:1221&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>7</b>
                                    </span>
                                    <span>10:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春熙路</span>
                                    <span>客流量:5222&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严重</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>8</b>
                                    </span>
                                    <span>13:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春熙路</span>
                                    <span>客流量:4512&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重度</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>9</b>
                                    </span>
                                    <span>16:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春熙路</span>
                                    <span>客流量:5524&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严重</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>10</b>
                                    </span>
                                    <span>22:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春熙路</span>
                                    <span>客流量:1554&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻度</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>11</b>
                                    </span>
                                    <span>6:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号线</span>
                                    <span>客流量:1534&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>12</b>
                                    </span>
                                   <span>11:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号线</span>
                                    <span>客流量:90521&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严重</span>

                                </div>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>13</b>
                                    </span>
                                   <span>14:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号线</span>
                                    <span>客流量:80521&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严重</span>

                                </div>
                                
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>13</b>
                                    </span>
                                   <span>18:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号线</span>
                                    <span>客流量:90521&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严重</span>

                                </div>
                                
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>14</b>
                                    </span>
                                   <span>22:30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号线</span>
                                    <span>客流量:20521&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻度</span>

                                </div>
                                
                            </li>
                        </ul>
                </div>

            </div>
            
            
            
            <div class="left-bottom">
                <div class="title">线路断面流量分析</div>
                <div class="bottom-b">
                    <div id="chart3" class="allnav"></div>
                </div>

            </div>
        </div>
        
        
        
        <div class="center-cen fl">
            <div class="cen-top">
            	<div class="title">出站，入站 站点客流量分析</div>
                <div class="top-title">
                	
                	
                    <ul>
                        <li>
                            <p>数量统计</p>                           
                            <span>6</span>
                            <span>5</span>
                            <span>万</span>
                            <b>个</b>
                        </li>
                        <li>
                            <p>预测分析</p>
                            <span>1</span>
                            <span>3</span>
                            <b>%</b>
                        </li>
                    </ul>
                </div>

                <div class="top-bottom">
                    <div id="chart1" class="allnav"></div>
                </div>


            </div>
            <div class="cen-bottom">
                <div class="title">2020年单月整体客流量数据分析预测</div>
                <div class="bottom-b">
                    <div id="chart4" class="allnav"></div>
                </div>

            </div>
        </div>
        
        <div class="center-right fr">
            <div class="right-top">
                <div class="title">用户性别比例分析</div>

                
                   <div id="chart8" class="allnav"></div>
                   
                

            </div>
            <div class="right-cen">
                <div class="title">用户年龄结构</div>
                <div id="chart2" class="allnav"></div>
            </div>
            <div class="right-bottom">
                <div class="title">2020年一月份工作日与周末分析</div>
                <div class="chat">
                    <div id="chart5" class="allnav"></div>
                </div>

            </div>
        </div>
    </div>


</div>


<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/wodry.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="js/echarts.js"></script>

<script>
    

    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum	= '0'+str;
        }else{
            realNum	= str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>